<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">-->
    <meta name="format-detection" content="telephone=no" />
    <title>沟通中</title>
    <link rel="stylesheet" type="text/css" href="__STATIC__/newcj/css/themes.css?v=2017129">
    <link rel="stylesheet" type="text/css" href="__STATIC__/newcj/css/h5app.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/newcj/fonts/iconfont.css?v=2016070717">
    <link rel="stylesheet" type="text/css" href="__STATIC__/newcj/css/chat_list.css">
    <script src="__STATIC__//newcj/js/jquery.min.js"></script>
    <script src="__STATIC__/newcj/js/dist/flexible/flexible_css.debug.js"></script>
    <script src="__STATIC__/newcj/js/dist/flexible/flexible.debug.js"></script>

</head>
<body>
<div class='fui-page-group'>
    <div class="fui-statusbar"></div>
<div class='fui-page chat-page'>
	<div class="fui-header">
	    <div class="title">消息列表</div>
	    <div class="fui-header-right"></div>
	</div>

	<div class="fui-content navbar chat-fui-content" style="padding-bottom: 2rem;">


<!--		<div class="chat-list flex" ><div class="chat-img"  style="background-image: url('http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg')"><span class="badge" style="top: -0.1rem;left: 80%;">1</span></div><div class="chat-info"><p class="chat-merch flex"><span class="title t-28">魔力克</span><span class="time">2017-12-14</span></p><p class="chat-text singleflow-ellipsis">你好</p></div></div>-->
	</div>
</div>
</div>
</body>
<script>



    var API_URL = "http://www.chat.com/index.php/api/chat/";
    var fromid ={$fromid};
    //聊天列表的信息
    ws = new WebSocket("ws://127.0.0.1:8282");

    ws.onmessage=function(e){
        var message = eval("("+e.data+")");

        switch (message.type) {
            case "init":
                var  bild = '{"type":"bind","fromid":"'+fromid+'"}';
                ws.send(bild);
                list();
                return;
                case "text":
                    $(".chat-fui-content").html("");
                    list();
                    return;
                    case "say_img":
                        $(".chat-fui-content").html("");
                        list();
                        return;
        }

    }

    function list(){
        $.post(
            API_URL+"get_list",
            {id:fromid},
            function(res){
                console.log(res);
                $.each(res,function (index,content) {

                    if (content.countNoread ==0){

                        $(".chat-fui-content").append('<div onclick=redi("'+content.chat_page+'") class="chat-list flex" ><div class="chat-img"  style="background-image: url('+content.head_url+')"></div><div class="chat-info"><p class="chat-merch flex"><span class="title t-28">'+content.username+'</span><span class="time">'+mydate(content.last_message.time)+'</span></p><p class="chat-text singleflow-ellipsis">'+content.last_message.content+'</p></div></div>\n');

                    }else {

                        $(".chat-fui-content").append('<div onclick=redi("'+content.chat_page+'") class="chat-list flex" ><div class="chat-img"  style="background-image: url('+content.head_url+')"><span class="badge" style="top: -0.1rem;left: 80%;">'+content.countNoread+'</span></div><div class="chat-info"><p class="chat-merch flex"><span class="title t-28">'+content.username+'</span><span class="time">'+mydate(content.last_message.time)+'</span></p><p class="chat-text singleflow-ellipsis">'+content.last_message.content+'</p></div></div>\n');

                    }
                })
            },'json'
        )
    }


    // $(function(){
    //     $.post(
    //             API_URL+"get_list",
    //             {id:fromid},
    //             function(res){
    //                 console.log(res);
    //                 $.each(res,function (index,content) {
    //
    //                 	if (content.countNoread ==0){
    //
	// 						$(".chat-fui-content").append('<div onclick=redi("'+content.chat_page+'") class="chat-list flex" ><div class="chat-img"  style="background-image: url('+content.head_url+')"></div><div class="chat-info"><p class="chat-merch flex"><span class="title t-28">'+content.username+'</span><span class="time">'+mydate(content.last_message.time)+'</span></p><p class="chat-text singleflow-ellipsis">'+content.last_message.content+'</p></div></div>\n');
    //
	// 					}else {
    //
	// 						$(".chat-fui-content").append('<div onclick=redi("'+content.chat_page+'") class="chat-list flex" ><div class="chat-img"  style="background-image: url('+content.head_url+')"><span class="badge" style="top: -0.1rem;left: 80%;">'+content.countNoread+'</span></div><div class="chat-info"><p class="chat-merch flex"><span class="title t-28">'+content.username+'</span><span class="time">'+mydate(content.last_message.time)+'</span></p><p class="chat-text singleflow-ellipsis">'+content.last_message.content+'</p></div></div>\n');
    //
	// 					}
	// 				})
	// 			},'json'
    //           )
	//      })

    /**
     *根据时间戳格式化为日期形式
     */
    function mydate(nS){

        return new Date(parseInt(nS) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
    }

    //点击事件
	function redi(url) {
    	window.location.href = url;

	}

</script>

</html>
